<template>
  <div :class="className" :style="{height:height,width:width,autoResize:autoResize,top:top,'font-size': Math.round(5400/100) + 'px'}" />
</template>

<script>
import * as echarts from 'echarts' // echarts theme
import drawMixin from "@/utils/drawMixin";
// import { getOrganQryStats } from "@/api/organQryStats";

const animationTime = 10000;
var seriesList = [];
var datasetWithFilters = [];

export default {
  mixins: [drawMixin],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '80%'
    },
    top: {
      type: String,
      default: '10%'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      params: {
        monthCnt: 60
      },
      chart: null,
      chartTimer: null,
      chartData: null,
      dataSet: [["month","totalNum","succNum","failNum"],
        ["202107",2244799,489597,1755202],
        ["202108",2323144,566074,1757070],
        ["202109",1100617,688486,412131],
        ["202110",727792,418610,309182],
        ["202111",691938,472097,219841],
        ["202112",1172903,603403,569500],
        ["202201",1144431,471891,672540],
        ["202202",950888,462150,488738],
        ["202203",1199306,550379,648927],
        ["202204",1183046,577191,605855],
        ["202205",2952246,759587,2192659],
        ["202206",1370124,687787,682337],
        ["202207",2832039,541656,2290383],
        ["202208",3297091,711021,2586070],
        ["202209",1630415,881159,749256],
        ["202210",16676,8880,7796],
        ["202211",15525,8019,7506],
        ["202212",276787,116710,160077],
        ["202301",1035008,273390,761618],
        ["202302",2640299,443950,2196349],
        ["202303",3102989,396925,2706064],
        ["202304",1563676,321247,1242429],
        ["202305",980112,380796,599316],
        ["202306",1907608,574718,1332890]],
      dataItems : ["totalNum","succNum"]
      // dataItems : ["totalNum","succNum","failNum"]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })

    this.getChartData()
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$el, 'macarons')
      this.analyzeChartData()
      this.setOptions(this.dataSet)
    },

    getChartData() {
      this.chartTimer = setInterval(() => {
        // getOrganQryStats(this.params).then(response => {
        //   this.dataSet = response.dataSet;
        // });
        // this.analyzeChartData();
        this.setOptions(this.dataSet);
      }, 30 * 1000)
    },

    analyzeChartData() {
      // echarts.util.each(this.orgNames, function (orgName) {
      this.dataItems.forEach(function (item) {
        console.log("analyzeChartDate each " + item);
        const datasetId = 'dataset_' + item;
        datasetWithFilters.push({
          id: datasetId,
          fromDatasetId: 'dataset_raw',
          transform: {
            type: 'filter',
            config: {
              and: [
                { dimension: 'month', gte: 202007 }
              ]
            }
          }
        });
        seriesList.push({
          type: 'line',
          datasetId: datasetId,
          showSymbol: true,
          smooth: true,
          name: item,
          // endLabel: {
          //   show: true,
          //   formatter: function (params) {
          //     return params.value[0] + ': ' + params.value[2];
          //   }
          // },
          label: {
            show: true,
            position: 'top',
            formatter: function (params) {
              return params.value[2];
            },
            color: '#fff',
          },
          lineStyle: {
            width: 4
          },
          labelLayout: {
            moveOverlap: 'shiftX'
          },
          emphasis: {
            focus: 'series'
          },
          areaStyle: {
            opacity: 0.3,
          },
          encode: {
            // x: 'month',
            y: item,
            // label: ['month',item],
            // itemName: 'month',
            // tooltip: [item]
          }
        });
      });
    },

    setOptions(dataSource) {
      console.log("dataSource:" + dataSource)
      this.chart.clear()
      this.chart.setOption({
        animationDuration: animationTime,
        animationEasing: 'quadraticOut',
        // animationDuration: animationTime,
        // animationDurationUpdate: animationTime,
        // animationEasingUpdate: "linear", //数据更新动画缓动效果
        // animationEasing: 'linear',
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          borderColor: '#FFF'
        },
        dataset: [
          {
            id: 'dataset_raw',
            source: dataSource
          },
          ...datasetWithFilters,
        ],

        tooltip: {
          show: true,
          trigger: 'item',
          extraCssText:'width: 100px; height: 100px;font-size: 36px; font-family: Arial;font-weight: bold;',
          textStyle: {
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            color: '#000',
            fontsize: 60
          }
        },
        xAxis: {
          type: 'category',
          nameLocation: 'middle'
        },
        yAxis: {
          nameTextStyle: {
            color: '#ffffff',
            fontSize: 20
          },
          splitLine: {
            lineStyle: {
              color: ['#c7c7c7'],
              width: 2
            }
          },
        },
        series: seriesList
      });
    }
  }
}
</script>
